<div ng-controller="Diagnostics.JfrController">

	<div class="row-fluid jfr-column-container"
		hawtio-auto-columns=".jfr-column">

		<div class="jfr-column">
			<div class="alert alert-danger alert-dismissable">
				<a href="" class="close" data-dismiss="alert" aria-label="close">×</a>
				<strong>Please note:</strong> Running Java Flight Recorder on
				production systems requires a <a
					href="http://www.oracle.com/technetwork/java/javaseproducts/overview/index.html"
					class="alert-link">license</a>.
			</div>
			<div class="alert alert-info alert-dismissable">
				<a href="" class="close" data-dismiss="alert" aria-label="close">×</a>
				<strong>Info:</strong>Equivalent command of last action: <code>{{jcmd}}</code> 
			</div>
			<div class="casettePlayer">
				<div class="casette">
					<svg role="img" aria-label="recording indicator"
						xmlns="http://www.w3.org/2000/svg" version="1.1"
						viewBox="0 0 24 24" width="25" height="25" id="recordingIndicator">
							<circle cx="12" cy="12" r="11" fill="red" ng-show="isRunning">
								<animate attributeType="XML" attributeName="fill" from="#ff0000"
							to="#000000" dur="2s" repeatCount="indefinite" />
							</circle>
				</svg>
					<div class="cassetteLabelCutCorners"></div>
					<div class="casetteLabel">
						{{jfrStatus}}
						<div class="notLabel">
							<div class="wrapCog" ng-class="{'spinning': isRunning}">
								<svg role="img" aria-label="cassette wheel"
									xmlns="http://www.w3.org/2000/svg" version="1.1"
									viewBox="0 0 24 24" width="50" height="50"
									ng-class="{'spinning': isRecording}" id="leftcog">
				<circle cx="12" cy="12" r="11" fill="white" />
				<circle cx="12" cy="12" r="8" fill="black" />
				<rect x="2" y="10" width="20" height="4" fill="black" stroke="none" />
				<rect x="2" y="10" width="20" height="4" fill="black" stroke="none"
										transform="rotate(45,12,12)" />
				<rect x="2" y="10" width="20" height="4" fill="black" stroke="none"
										transform="rotate(90,12,12)" />
				<rect x="2" y="10" width="20" height="4" fill="black" stroke="none"
										transform="rotate(135,12,12)" />
				</svg>
							</div>
							<div class="wrapCog" ng-class="{'spinning': isRunning}"
								id="rightCogWrapper">
								<svg role="img" aria-label="cassette wheel"
									xmlns="http://www.w3.org/2000/svg" version="1.1"
									viewBox="0 0 24 24" width="50" height="50"
									ng-class="{'spinning': isRecording}">
					<circle cx="12" cy="12" r="11" fill="white" />
					<circle cx="12" cy="12" r="8" fill="black" />
					<rect x="2" y="10" width="20" height="4" fill="black" stroke="none" />
					<rect x="2" y="10" width="20" height="4" fill="black" stroke="none"
										transform="rotate(45,12,12)" />
					<rect x="2" y="10" width="20" height="4" fill="black" stroke="none"
										transform="rotate(90,12,12)" />
					<rect x="2" y="10" width="20" height="4" fill="black" stroke="none"
										transform="rotate(135,12,12)" />
				</svg>
							</div>
						</div>
					</div>
				</div>
				<div class="casetteButtons">

					<button class="recorderButton btn"
						tooltip="Unlock commercial features to be able to record"
						ng-click="unlock()" ng-disabled="jfrEnabled"
						ng-class="jfrEnabled ? 'disabled' : 'raisedButton'">
						<i class="icon-5x"
							ng-class="jfrEnabled ? 'icon-unlock' : 'icon-lock'"></i>
					</button>
					<button class="recorderButton btn" ng-enabled="!isRunning"
						ng-class="!jfrEnabled || isRunning ? 'disabled' : 'raisedButton'"
						tooltip="Start recording"
						ng-click="startRecording()" ng-disabled="isRunning" >
						<div class="recordingSymbol" id="rec"></div>
					</button>
					<button class="recorderButton btn" title="Dump recording to disk"
						ng-class="jfrEnabled && isRecording ? 'raisedButton' : 'disabled'"
						ng-disabled="!isRecording"
						tooltip="Dump {{jfrSettings.name}} to disk"
						ng-click="dumpRecording()">
						<i class="icon-save icon-5x"></i>
					</button>
					<button class="recorderButton btn" ng-disabled="!isRecording"
						ng-class="jfrEnabled && isRecording ? 'raisedButton' : 'disabled'"
						tooltip="Stop {{jfrSettings.name}}"
						ng-click="stopRecording()">
						<div class="recordingSymbol" id="stop"></div>
					</button>
					<button class="recorderButton btn" 
						ng-class="jfrEnabled && !settingsVisible ? 'raisedButton' : 'disabled'"
						tooltip="Show/hide settings"
						ng-click="toggleSettingsVisible()">
						<i class="icon-cog icon-5x"></i>
					</button>
				</div>
			</div>
		</div>

		<div class="jfr-column" ng-show="settingsVisible">


			<dl>
				<dt>Recorder Settings</dt>
				<dd>
					<div simple-form name="jfrForm" data="formConfig"
						entity="jfrSettings"></div>

				</dd>
			</dl>

		</div>
		<table ng-show="!!recordings.length"
				class="table table-condensed table-striped">
				<tr>
					<th>Rec#</th>
					<th>Size</th>
					<th>Time</th>
					<th>File</th>
				</tr>
				<tr ng-repeat="aRecording in recordings">
					<td>{{aRecording.number}}</td>
					<td>{{aRecording.size}}</td>
					<td>{{aRecording.time | date: 'yyyy-MM-dd HH:mm:ss' }}</td>
					<td><a href="file://{{aRecording.file}}">{{aRecording.file}}</a></td>
				</tr>
			</table>

	</div>

</div>
